<template>
  <div class="app-container">
    <!-- 搜索部分 -->
    <div>
      <el-form :model="search" inline v-show="search.showSearch">
        <el-form-item label="车间编码 ">
          <el-input v-model="search.workshopId" placeholder="输入车间名称"></el-input>
        </el-form-item>
        <el-form-item label="车间名称 ">
          <el-input v-model="search.workshopName" placeholder="输入车间名称"></el-input>
        </el-form-item>
        <el-form-item label="车间位置 ">
          <el-input v-model="search.workshopPosition" placeholder="输入车间名称"></el-input>
        </el-form-item>
        <el-button icon="el-icon-search" circle @click="getList"></el-button>
      </el-form>
    </div>
    <!-- 按钮排 -->
    <div>
      <el-row :gutter="2">
        <el-col :span="1.5">
          <el-button type="primary" size="small" @click="addItem">增加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" size="small" @click="updataItem(true)" :disabled="updateDisable">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" size="small" @click="deleteItem(true)" :disabled="delDisable">删除</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="search.showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-row>
        <pagination
          :v-show="true"
          :total="pagination.total"
          :page.sync="pagination.pageNum"
          :limit.sync="pagination.pageSize"
          @pagination="getList"
        />
      </el-row>
    </div>
    <div>
      <vxe-table
        border
        ref="xTable1"
        :data="table.workshopList"
        :loading="table.loading"
        @checkbox-change="selectChangeEvent"
        :row-config="{ isHover: true }"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column field="workshopId" title="车间编码" sortable></vxe-column>
        <vxe-column field="workshopName" title="车间名称" sortable></vxe-column>
        <vxe-column field="workshopPosition" title="车间位置" sortable></vxe-column>
        <vxe-column title="操作" show-overflow>
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="updataItem(false, scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteItem(false, scope.row)" class="delred">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        background
        :current-page.sync="pagination.pageNum"
        :page-size.sync="pagination.pageSize"
        :total="pagination.total"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        @page-change="getList"
      >
      </vxe-pager>
    </div>

    <!-- 弹窗-- 修改和删除 -->
    <el-dialog :title="DMLdialog.title" :visible.sync="DMLdialog.visiable" width="600px" append-to-body>
      <el-form ref="DMLdialog" :model="DMLdialog.form" label-width="150px" label-position="left" :rules="DMLdialog.rules">
        <el-form-item label="车间编码 " prop="workshopId">
          <el-input v-model="DMLdialog.form.workshopId" placeholder="输入车间名称"></el-input>
        </el-form-item>
        <el-form-item label="车间名称 " prop="workshopName">
          <el-input v-model="DMLdialog.form.workshopName" placeholder="输入车间名称"></el-input>
        </el-form-item>
        <el-form-item label="车间位置 " prop="workshopPosition">
          <el-input v-model="DMLdialog.form.workshopPosition" placeholder="输入车间位置"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkshopList, insertworkshop, updateWorkshop, delWorkshop } from '@/api/basisManagement/workshop.js'
export default {
  name: 'workshop',
  data() {
    return {
      //搜索框配置
      search: {
        workshopId: '',
        workshopName: '',
        workshopPosition: '',
        showSearch: true,
      },
      //表格
      table: {
        loading: true,
        workshopList: [],
      },
      //分页
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      //新增修改数据项配置
      DMLdialog: {
        title: '',
        visiable: false,
        form: {
          workshopId: '',
          workshopName: '',
          workshopPosition: '',
        },
        rules: {
          workshopId: [{ required: true, message: '车间编码不能为空', trigger: 'blur' }],
          workshopName: [{ required: true, message: '车间名称不能为空', trigger: 'blur' }],
          workshopPosition: [{ required: true, message: '车间位置不能为空', trigger: 'blur' }],
        },
      },
      //修改按钮
      updateDisable: true,
      //删除按钮
      delDisable: true,
      flag: 'update', //区分修改和删除
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //获取表格数据
    getList() {
      const query = { ...this.search, ...this.pagination }
      delete query.showSearch
      getWorkshopList(query).then((res) => {
        if (res.code == 200) {
          this.table.loading = false
          this.pagination.total = res.data.item1
          this.table.workshopList = res.data.item2
        }
      })
    },

    //行更新
    handleUpdate(row) {},
    //行删除
    handleDelete(row) {},
    selectChangeEvent({ checked }) {
      const records = this.$refs.xTable1.getCheckboxRecords()
      if (records.length == 1) {
        this.updateDisable = false
      } else {
        this.updateDisable = true
      }
      if (records.length > 0) {
        this.delDisable = false
      } else {
        this.delDisable = true
      }
    },
    //新增按钮
    addItem() {
      this.DMLdialog.title = '新增'
      this.DMLdialog.visiable = true
      this.flag = 'add'
    },
    //新增确认
    submitForm() {
      if (this.flag == 'update') {
        updateWorkshop(this.DMLdialog.form).then((res) => {
          if (res.code == 200 && res.data == 1) {
            this.$notify.success('修改成功')
            this.getList()
            this.DMLdialog.visiable = false
            this.reset()
          }
        })
      } else if (this.flag == 'add') {
        this.$refs['DMLdialog'].validate((valid) => {
          if (valid) {
            insertworkshop(this.DMLdialog.form).then((res) => {
              if (res.code == 200) {
                this.getList()
                this.DMLdialog.visiable = false
                this.reset()
              }else if(res.data==210){
                 this.$notify.error("新增失败（null）,联系技术人员")
              }
            })
          }
        })
      }
    },
    cancel() {
      this.DMLdialog.visiable = false
      this.reset()
    },
    reset() {
      this.DMLdialog.form = {
        workshopId: '',
        workshopName: '',
        workshopPosition: '',
      }
      this.DMLdialog.form.reset()
    },
    //修改事件
    updataItem(flag, row) {
      debugger
      this.DMLdialog.title = '修改'
      this.DMLdialog.visiable = true
      this.flag = 'update'
      if (!flag) {
        this.DMLdialog.form.workshopId = row.workshopId
        this.DMLdialog.form.workshopName = row.workshopName
        this.DMLdialog.form.workshopPosition = row.workshopPosition
        this.DMLdialog.form.id = row.id
      } else {
        const records = this.$refs.xTable1.getCheckboxRecords()
        if (records.length == 1) {
          this.DMLdialog.form.workshopId = records[0].workshopId
          this.DMLdialog.form.workshopName = records[0].workshopName
          this.DMLdialog.form.workshopPosition = records[0].workshopPosition
          this.DMLdialog.form.id = records[0].id
        }
      }
    },
    //删除事件
    deleteItem(flag, row) {
      if (!flag) {
        this.$modal
          .confirm('是否确认删除车间名称为"' + row.workshopName + '"的数据项？')
          .then(function () {
            const array = []
            array.push(row.id)
            return delWorkshop(array)
          })
          .then(() => {
            this.getList()
            this.$modal.msgSuccess('删除成功')
          })
          .catch(() => {})
      } else {
        const records = this.$refs.xTable1.getCheckboxRecords()
        if (records.length > 0) {
          this.$modal
            .confirm('是否确认删除车间名称为"' + records.map((it) => it.workshopName) + '"的数据项？')
            .then(function () {
              return delWorkshop(records.map((it) => it.id))
            })
            .then(() => {
              this.getList()
              this.$modal.msgSuccess('删除成功')
            })
            .catch(() => {})
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.delred {
  ::v-deep .el-icon-delete {
    color: #f56c6c;
  }
  ::v-deep span {
    color: #f56c6c;
  }
}
</style>
